<template>
  <!--地表沉降历史数据-->
  <section class="content">
    
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
          <el-form :inline="true">
            <el-form-item>测点名称：
              <el-select v-model="queryPointlist" clearable placeholder="请选择" @change="selectKey">
                <el-option v-for="item in queryPoint" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
              时间：
              <el-date-picker
                v-model="value2"
                type="daterange"
                align="right"
                unlink-panels
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions2"
                @change="timefirst"
              ></el-date-picker>
              数据类型：
              <el-select v-model="typeid" clearable placeholder="全部">
                <el-option v-for="item in type" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="inquire">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>

        <el-col :span="24" class="bc-w">
          <el-col :span="12" class="chart-plane">
            <div class="chartLine" id="chartLine"></div>
          </el-col>

        <el-col :span="12" class="chart-plane">
            <div class="chartLine" id="chartLine1"></div>
          </el-col>

        </el-col>    
  </section>
</template>
<script>
import echarts from "echarts";
export default {
  data() {
    return {
      projectId: "",
      activeName: "first",
      queryPointlist: null,
      crossSectionlist: null,
      longitudinalSectionlist: null,
      firstTime: [],
      type: [
        {id:1,name:"设备数据"},
        {id:2,name:"人工数据"}
      ],
      typeCross: [
        {id:1,name:"设备数据"},
        {id:2,name:"人工数据"}
      ],
      typeLong: [
        {id:1,name:"设备数据"},
        {id:2,name:"人工数据"}
      ],
      typeid:"",
      typeCrossid:"",
      typeLongid:"",
      xAxis: [],
      series: [],
      transverseSectionxAxis: {
        min: Date.now() - 3600 * 1000 * 24 * 30,
        max: Date.now(),
        type: 'value'
      },
      transverseSectionseries: [],
      transverseSectionseries1: [],
      longitudinalSectionsxAxis: {
        min: Date.now() - 3600 * 1000 * 24 * 30,
        max: Date.now(),
        type: 'value'
      },
      longitudinalSectionsseries: [],
      longitudinalSectionsseries1: [],
      value2: [],
      value5: [],
      value8: [],
      queryPoint: [],
      options1: [],
      tCheckedByDay: false,
      lCheckedByDay: false,
      chartLine: null,
      chartLine1: null,
      pickerOptions2: {
        //仅当天前时间
        disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
        },
        shortcuts: this.shortcuts
      },
      pickerOptions3: {
        //仅当天前时间
        disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
        },
        shortcuts: this.shortcuts
      },
      pickerOptions4: {
        //仅当天前时间
        disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6
        },
        shortcuts: this.shortcuts
      },

    };
  },
  methods: {
  
    timefirst(t) {
      this.value2 = t
    },
  
    selectKey(id) {
      if(id != null) {
        var date = this.queryPoint.find(item => {
          var date = item.newData.date;         
          if(date===null)
            return;
          if(item.id === id) {
            //  var d = moment(date,'YYYY-MM-DD HH:mm:ss');
            //  this.value2 = [moment(d).subtract(1, 'months').format('YYYY-MM-DD'),moment(d).format('YYYY-MM-DD')];
          }
        });
      }
    },

    inquire(){
        let data = {
          id:this.queryPointlist,
          beginDate:this.value2[0],
          endDate:this.value2[1],
          type:this.typeid
        }

        this.projectModel
        .collectData(data)
        .then(res => {
          this.xAxis = res.data.xAxis;
          this.series = res.data.series;
          this.drawCharts();
        })
        .catch(err => {
          console.log(err.message);
        });
    },
 
  
    drawLineChart() {
      //沉降曲线图
      this.chartLine = echarts.init(document.getElementById("chartLine"));
      //沉降速率图
      this.chartLine1 = echarts.init(document.getElementById("chartLine1"));
      

      var _this = this;
      this.chartLine.setOption(
        {
          title: {
            text:  this.xAxis.data[0] +
              "至" +
              this.xAxis.data[this.xAxis.data.length-1] +"  "+ _this.series[0].name +"  "+ "地下水位图",
            left: "center"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          toolbox: {
          orient: 'vertical',
          itemSize: 16,
          show: true,
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: [
            {
              name: `
              日期`,
              nameLocation: "middle",
              type: "category",
              boundaryGap: false,
              data: _this.xAxis.data
            },
            
          ],
          yAxis: [
            {
              name: `
              
              累计变化量(mm)
              
              `,
              type: "value",
              nameLocation: "middle",
              boundaryGap: false
            }
          ],
          series: [
            {
              type: "line",
              data: _this.series[0].value,
              smooth: false
            }
          ]
        },
        true
      );

      this.chartLine1.setOption(
        {
          title: {
            text: this.xAxis.data[0] +
              "至" +
              this.xAxis.data[this.xAxis.data.length-1] +"  "+_this.series[0].name +"  "+ "水位变化速率图",
            left: "center",
            subtextStyle:{
              fontSize:15
            }
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            // formatter: _this.transverseSectionxAxis.type == 'value' ? function(params) {
            //     return  moment(params[0].axisValue).format('YYYY-MM-DD') + '<br/>'
            //            + params[0].data;
            // } : undefined
          },
          toolbox: {
          orient: 'vertical',
          itemSize: 16,
          show: true,
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
          xAxis: [
            {
              name: `
              日期`,
              nameLocation: "middle",
              type: "category",
              boundaryGap: true,
              data: _this.xAxis.data
            }
          ],
          yAxis: [
            {
              name: `

              变形速率控制值(mm/d)
              
              `,
              type: "value",
            nameLocation: "middle"
            }
          ],

          series: [
            {
              type: "scatter",
              data: _this.series[0].velocity,
              smooth: false
            }
          ]
        },
        3000
      );
    },
    drawCharts() {
      this.drawLineChart();
    },
    date() {
            const end = new Date();
		        var seperator1 = "-";
		        var year = end.getFullYear();
		        var month = end.getMonth()+1;
		        var strDate = end.getDate();
		        if (month >= 1 && month <= 9) {
		            month = "0" + month;
		        }
		        if (strDate >= 0 && strDate <= 9) {
		            strDate = "0" + strDate;
            }

            var endDate= year + seperator1 + month + seperator1 + strDate;

            const start = new Date();
            var startYear = start.getFullYear()-5;
            var startMonth = start.getMonth()+1;
            var startDate = start.getDate();
            if (startMonth >= 1 && startMonth <= 9) {
		            startMonth = "0" + startMonth;
		        }
		        if (startDate >= 0 && startDate <= 9) {
		            startDate = "0" + startDate;
            }
            var startDat = startYear + seperator1 + startMonth + seperator1 + startDate;
            this.value2 = [startDat,endDate]
            this.value5 = [startDat,endDate]
            this.value8 = [startDat,endDate]
    },

  },
  mounted() {
    this.projectId = this.$route.query.projectId;
    this.date();
    let data = {
      projectId: this.projectId,
      monitorItemId: "10",
      resultType: "3"
    };

    this.projectModel
      .queryPoint(data)
      .then(res => {
        this.queryPoint = res.data;

        if(this.queryPoint.length > 0) {
          this.queryPointlist = this.queryPoint[0].id;
          this.inquire();
        }
      })
      .catch(err => {
        console.log(err.message);
      });
  }
};
</script>
<style>
.setting-tabs {
  height: 100%;
}

.setting-tabs>.el-tabs__content {
  height: calc(100% - 55px);
}
.setting-tabs>.el-tabs__content>.el-tab-pane {
height: 100%;
}
</style>

<style scoped>
.content {
  padding-top: 10px;
  background-color: #ffffff;
  min-height: 680px;
}
.bc-w {
  width: 100%;
  height: calc(100% - 90px);
  padding: 10px;
}
.chart-plane {
  height: 100%;
}
.chartLine {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  padding: 10px;
}
</style>

<style>
.el-tabs__nav {
  text-align: left;
  margin-left: 20px;
}
.el-tabs__active-bar {
  left: 0;
}

</style>
